﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="DropDownListWidth">
    <h2><DemoNavLink Link="TagBox#DropDownListWidth" />TagBox – Drop-Down List Width</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2.DropDownWidthMode">DropDownWidthMode</a> property to specify the width of a drop-down list.
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DropDownWidthMode">ContentOrEditorWidth</a> (Default) - The list's width is equal to the width of the longest list item or the editor's width (whichever is larger).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DropDownWidthMode">ContentWidth</a> - The list's width is equal to the width of the longest list item.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DropDownWidthMode">EditorWidth</a> - The list's width is equal to the editor's width. List items are cut if they do not fit.</li>
    </ul>
    <p>
        In this demo, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DropDownWidthMode">ContentOrEditorWidth</a> mode is used for both TagBox components. To change the width of their drop-down lists, use the <b>Drop Down Width Mode</b> option below.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Select items" />
    </div>
    <div class="card-body">
        <div class="d-inline-flex" style="width: 200px;">
            <DxTagBox Data="@Staff.DataSource" style="width: 150px;"
                      TextFieldName="@nameof(Person.FirstName)"
                      @bind-Values="@SelectedStaff"
                      DropDownWidthMode="DropDownWidthMode"
                      NullText="Short text"
                      SizeMode="SizeMode"></DxTagBox>
        </div>
        <div class="d-inline-flex" style="width: 200px;">
            <DxTagBox Data="@Staff.DataSource" style="width: 200px;"
                      TextFieldName="@nameof(Person.Text)"
                      @bind-Values="@SelectedStaff1"
                      NullText="Long text"
                      DropDownWidthMode="DropDownWidthMode"
                      SizeMode="SizeMode"></DxTagBox>
        </div>
    </div>
</div>

<div class="code-snippet card demo-card-wide">
    <CodeSnippetHeader DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTagBox-2#drop-down-window-width"/>
    <div class="card-footer text-muted">
        <div style="margin: 1em 0 -1em .5em;">
            <label class="d-inline-flex flex-nowrap align-items-center">
                <b class="hljs-attr" style="white-space: nowrap; margin-right: .5em;">Drop Down Width Mode: </b>
                <DxComboBox Data="@(Enum.GetNames(typeof(DropDownWidthMode)))"
                            Value="@(DropDownWidthMode.ToString())"
                            ValueChanged="@((string selectedItem) => { DropDownWidthMode = Enum.Parse<DropDownWidthMode>(selectedItem); })">
                </DxComboBox>
            </label>
        </div>
        <CodeSnippet_Editor_TagBox_DropDownWidth></CodeSnippet_Editor_TagBox_DropDownWidth>
    </div>
</div>


@code {
    IEnumerable<Person> SelectedStaff { get; set; }
    IEnumerable<Person> SelectedStaff1 { get; set; }

    DropDownWidthMode DropDownWidthMode { get; set; } = DropDownWidthMode.ContentOrEditorWidth;
}
